<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd"> 

<html> 
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>Documento HTML con formularios</title>
        <style type="text/css">
            div{
                padding-bottom: 5px;
            }
            fieldset{
                width: 700px;
            }
        </style>
    </head>
    <body>
        <h1>Registro de usuario</h1>
        <form action="procesarFormulario.php" method="post">
            <div>
                <input type="hidden" name="datoOculto" value="Dato oculto">
                
                <fieldset>
                    <legend>Datos de Prueba</legend>
                    <div>
                        Control de inhabilitado
                        <input type="text" name="diableControl" disabled="disabled" 
                               size="100"
                               value="Valor del control deshabilitado">
                    </div>
                    
                    <div>
                        Control de solo lectura
                        <input type="text" name="readonlyControl" 
                               readonly="readonly" size="100"
                               value="Valor del control de solo lectura">
                    </div>
                </fieldset>
                
                <fieldset>
                    <legend>Datos de Personales</legend>
                    <div>
                        Nombre:<br>
                        <input type="text" value="" name="nombre" size="20">
                    </div>
                    <div>
                        Usuario<br>
                        <input type="text" value="" name="usuario" size="20" maxlength="20">
                    </div>
                    <div>
                        Contrase&ntilde;a:<br>
                        <input type="password" value="" name="passwd" size="20">
                    </div>
                    <div>
                        Confirmar contrase&ntilde;a:<br>
                        <input type="password" value="" name="confPasswd" size="20">
                    </div>
                    <div>
                        Ciudad:<br>
                        <select name="ciudad">
                            <option value="" selected="selected">Seleccione una ciudad...</option>
                            <optgroup label="Altiplano">
                                <option value="lpz">La Paz</option>
                                <option value="or">Oruro</option>
                                <option value="pot">Potosi</option>
                            </optgroup>
                            <optgroup label="Valles">
                                <option value="cbba">Cochabamba</option>
                                <option value="chq">Chuquisaca</option>
                                <option value="tar">Tarija</option>
                            </optgroup>
                            <optgroup label="Llanos">
                                <option value="pan">Pando</option>
                                <option value="ben">Beni</option>
                                <option value="scz">Santa Cruz</option>
                            </optgroup>
                        </select>
                    </div>

                    <div>
                        Sexo:<br>
                        
                        <label>
                            <input type="radio" name="sexo" id="sexoMasculino" value="M" checked="checked">
                            Masculino
                        </label>

                        <input type="radio" name="sexo" id="sexoFemenino" value="F">
                        <label for="sexoFemenino">Femenino</label>
                    </div>

                    <div>
                        Requisitos presentados:<br>
                        <input type="checkbox" value="CI" name="ci" id="ci" checked="checked">
                        <label for="ci">Cedula de Identidad</label>
                        <br>

                        <input type="checkbox" value="cn" name="cn" id="cn">
                        <label for="cn">Certificado de nacimiento</label>
                        <br>

                        <input type="checkbox" value="pasaporte" name="pasaporte" id="pasaporte">
                        <label for="pasaporte">Pasaporte</label>
                    </div>

                    <div>
                        Informacion adicional:<br>
                        <textarea name="infoAdicional" rows="5" cols="80"></textarea>
                    </div>
                </fieldset>
                
                
                <div>
                    <input type="submit" value="Enviar datos">
                    <button onclick="alert('Acabas de dar click en el boton')">Boton normal</button>
                    <input type="Reset">
                </div>
            </div>
        </form>
        <form action="algunaPagina.php" method="post">
            <div>
                <span>Cual es tu nombre: </span>
                <input type="text" name="nombre" id="nombre" >
                <button onclick="return Saludar()">Ingresar</button>
            </div>
        </form>
        <script type="text/javascript">
            function Saludar(){
                var nombre = document.getElementById("nombre").value;
                if(nombre == ""){
                    alert("Ingrese su nombre primero");
                    return false;
                }
                alert("Hola " + nombre + ". Bienvenido...");
                return true;
            }

        </script>
    </body>
</html>
